<template>
  <el-breadcrumb class="bread-nav" separator-class="el-icon-arrow-right">
     <transition-group  name="el-fade-in">
        <template v-for="(item,index) in routeNav" :key="index">
            <el-breadcrumb-item v-if="(index == routeNav.length - 1) || item.path == 'noredirect'">
                {{item.title}}
            </el-breadcrumb-item>
            <el-breadcrumb-item v-else :to="{ path: item.path }">{{item.title}}</el-breadcrumb-item>
        </template>
     </transition-group>
  </el-breadcrumb>
</template>

<script>
import { computed, reactive, watchEffect } from 'vue'
import { useRoute } from 'vue-router'

const generateBreadNav = (route) => {

    console.log(route);
    let navList = [
        {
            path: '/',
            title: '仪表盘'
        }
    ]

    if(route[1].path == "/dashboard"){
        return navList
    }

    route = route.filter(value=>{
        return value.children.length != 1
    })

    const routes = route.map(item => {
        let path;
        if(item.redirect != null){
            path = item.redirect
        }else{
            path = item.path
        }

        return {
            path: path,
            title: item.meta.title
        }
    })

    return navList.concat(routes)
}

export default {
    name: 'BreadNav',
    setup(){
        const route = useRoute()
        
        let routeNav = reactive([]);
        watchEffect(()=>{
            routeNav.splice(0,routeNav.length,...generateBreadNav(route.matched))
        })

        return {
            routeNav
        }
    }
}
</script>

<style lang="scss" scoped>
    .bread-nav{
        display: inline-block !important;
    }
</style>

<style lang="scss">
    .bread-nav{
         .el-breadcrumb__inner{
            color: #ffffff !important;
        }

        .is-link{
            color: #966981 !important;
        }
    }
</style>